<div class="row" *ngIf="details$ | async as details">
  <div class="g-top-button-group">
    <button *ngIf="false" class="btn btn-outline-primary mr-3" (click)="ssh(details)">在线SSH</button>
    <ng-container *ngIf="details.status === ComputerStatus.Enable; else enableRef">
      <button class="btn btn-outline-danger" (click)="status(details.id, ComputerStatus.Disable)">
        停用终端
      </button>
    </ng-container>
    <ng-template #enableRef>
      <button class="btn btn-outline-success" (click)="status(details.id, ComputerStatus.Enable)">
        启用终端
      </button>
    </ng-template>
    <button class="btn btn-danger ml-3" (click)="delete(details)">删除终端</button>
  </div>
  <div class="col-12 col-xl-9">
    <m-card>
      <div card-head>
        终端信息
        <div *ngIf="edit; else buttonRef">
          <button class="btn btn-secondary mr-3" (click)="edit = false;form.patchValue( {device_type:details.device_type})">取消</button>
          <button class="btn btn-primary" form="form">保存</button>
        </div>
        <ng-template #buttonRef>
          <div>
            <button class="btn btn-secondary mr-3" (click)="upgrade()">升级系统</button>
            <button class="btn btn-primary" (click)="edit = true">编辑终端</button>
          </div>
        </ng-template>
      </div>
      <div class="status">
        <div>
          终端状态：
          <span>
            <m-enable-status-text [status]="details.status"></m-enable-status-text>
          </span>
        </div>
        <div><span>主机名：</span>{{ details.host_name || '未知' }}</div>
        <div><span>IP地址：</span>{{ details.network_device_list[0]?.ip }}</div>
        <div><span>编辑时间：</span>{{ details.updated_at | date }}</div>
        <div><span>创建时间：</span>{{ details.created_at | date }}</div>
        <div><span>系统版本：</span>{{ details.system_version || '未知'}}</div>
        <div><span>客户端版本：</span>{{ details.client_version || '未知'}}</div>
        <div><span>设备归属地：</span>{{ details.location_name }}</div>
      </div>
      <hr />
      <form id="form" [formGroup]="form" (ngSubmit)="save()">
        <div class="info">
          <div class="first_line">
            <div *ngIf="edit; else nameRef" class="form-group">
              <label for="name">终端别名：</label>
              <input type="text" id="name" class="form-control form-control-sm" maxlength="10" formControlName="name" />
            </div>
            <ng-template #nameRef>
              <div><span>终端别名：</span>{{ details.name }}</div>
            </ng-template>
            <div>
              <span>在线状态：</span>
              <m-online-status-text [status]="details.online"></m-online-status-text>
            </div>
            <div><span>已装系统：</span>{{ details.os }}</div>
            <div>
              <span>系统状态：</span>
              <m-update-status-text [status]="details.need_upgrade"></m-update-status-text>
            </div>
            <div>
              <span>软件状态：</span>
              <m-update-status-text [status]="details.need_upgrade"></m-update-status-text>
            </div>
          </div>
          <div class="two_line">
            <div *ngIf="edit;else typeRef">
              <label for="terminalType">终端类别：</label>
              <div #terminalType class="terminalType">
                <mat-select class="form-control selected"
                   formControlName='device_type'>
                  <ng-container>
                    <mat-option *ngFor="let item of terminalCate" [value]="item.value">{{item.name}}</mat-option>
                  </ng-container>
                </mat-select>
              </div>
            </div>
            <ng-template #typeRef>
              <div><span>终端类别：</span>{{ !form.value.device_type? '个人设备' : '公共设备'}}</div>
            </ng-template>
          </div>
          <div class="three_line">
            <div *ngIf="edit; else remarkRef" class="form-group">
              <label for="remark">备注：</label>
              <input type="text" id="remark" class="form-control form-control-sm" formControlName="remark"
                maxlength="100" />
            </div>
            <ng-template #remarkRef>
              <div><span>备注：</span>{{ details.remark || '暂无' }}</div>
            </ng-template>
          </div>
        </div>
      </form>
    </m-card>
    <m-card>
      <div card-head>
        硬件信息
      </div>
      <div class="hardware">
        <div><span>终端型号：</span>{{ details.product_name || '暂无' }}</div>
        <div><span>主板：</span>{{ details.mainboard?.model || '暂无' }}</div>
        <div>
          <span>CPU：</span>
          <ng-container *ngFor="let cpu of details.cpu_list">{{ cpu.model }}</ng-container>
        </div>
        <ng-container *ngFor="let memory of details.memory_list; index as $index">
          <div>
            <span> 内存 {{ $index + 1 }} ： </span>
            {{ memory.model ? memory.model : '未知型号' }}
            ({{ memory.cap | size }})
          </div>
        </ng-container>
        <ng-container *ngFor="let network_device of details.network_device_list; index as $index">
          <div>
            <span> 网卡 {{ $index + 1 }} ：</span>
            {{ network_device?.model }}
          </div>
          <div>
            <span>MAC地址 {{ $index + 1 }} ：</span>
            {{ network_device?.mac }}
          </div>
        </ng-container>
        <ng-container *ngFor="let disk of details.disk_list; index as $index">
          <div>
            <span> 硬盘{{ $index + 1 }}： </span>
            {{ disk.model ? disk.model : '未知型号' }}({{ disk.cap | size }})
          </div>
        </ng-container>
      </div>
    </m-card>
    <m-card *ngIf="!details.device_type">
      <div card-head>
        <span>允许登陆用户</span>
        <button class="btn btn-primary" (click)="addPerson()">添加用户</button>
      </div>
      <m-data-table *ngIf="person$ as person" [data]="person.list" [result]="person" [selection]="selection"
        [sortable]="Sortable" [sortUseRouteQueryParam]="true">
        <ng-container mDataTableColumn header="姓名">
          <ng-template let-name="full_name" let-id="id">
            <td>{{ name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="工号">
          <ng-template let-job="job_number">
            <td>{{ job }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="角色">
          <ng-template let-utype="utype">
            <td>{{ utype ? '管理员':'普通用户'}}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="状态">
          <ng-template let-status="status">
            <td>{{ status ? '停用':'正常'}}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="在线">
          <ng-template let-online="online">
            <td>{{ online ? '在线':'离线'}}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="操作">
          <ng-template let-user>
            <td>
              <button mat-icon-button [matMenuTriggerFor]="editMenu">
                <mat-icon>edit</mat-icon>
              </button>
              <mat-menu #editMenu>
                <button mat-menu-item (click)="deletePersonnel([user],person)">删除</button>
              </mat-menu>
            </td>
          </ng-template>
        </ng-container>

        <m-pagination [pageSize]="person.pageSize" [length]="person.total">
          <div>
            <button class="btn btn-secondary btn-sm mr-3" (click)="selection.select(person.list)">
              全选
            </button>
            <button class="btn btn-secondary btn-sm" [matMenuTriggerFor]="batchMenu">批量操作</button>
            <mat-menu #batchMenu>
              <button mat-menu-item (click)="deletePersonnel(selection.selected,person)">删除</button>
            </mat-menu>
          </div>
        </m-pagination>
      </m-data-table>
    </m-card>
    <m-card>
      <div card-head>
        终端登录记录
      </div>
      <m-api-data-table [dataSource]="usedLogger$ | async">
        <ng-container mDataTableColumn header="区域名称">
          <ng-template let-name="area_name">
            <td>{{ name }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="人员名称">
          <ng-template let-name="username" let-id="uid">
            <td>
              <a [mDetailRouterLink]="{ name: name, id: id, type: 'personnel' }">{{ name }}</a>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="工号">
          <ng-template let-job="user_number">
            <td>{{ job }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="终端异常">
          <ng-template let-count="os_num">
            <td>{{ count }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="行为">
          <ng-template let-operation_desc="operation_desc">
            <td>{{ operation_desc }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="行为时间">
          <ng-template let-time="created_at">
            <td>{{ time | date }}</td>
          </ng-template>
        </ng-container>
      </m-api-data-table>
    </m-card>
    <m-card>
      <div card-head>
        已装软件
      </div>
      <m-api-data-table [dataSource]="installed$ | async" [defaultOption]="{ pc_id: details.id }" #softwareTableRef>
        <ng-container mDataTableColumn header="软件别名">
          <ng-template let-name="software_name" let-id="soft_id">
            <td>
              <a [mDetailRouterLink]="{ name: name, id: id, type: 'software' }">{{ name }}</a>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="软件备注">
          <ng-template let-remark="remark">
            <td>{{ remark }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="软件更新">
          <ng-template let-status="need_upgrade">
            <td>
              <m-update-status-text [status]="status"></m-update-status-text>
            </td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="本机版本">
          <ng-template let-version="version">
            <td>{{ version }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="源内版本">
          <ng-template let-version="repo_version">
            <td>{{ version }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="本机更新时间">
          <ng-template let-time="updated_at">
            <td>{{ time | date }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="源内更新时间">
          <ng-template let-time="upgraded_at">
            <td>{{ time | date }}</td>
          </ng-template>
        </ng-container>
        <ng-container mDataTableColumn header="操作">
          <ng-template let-id="soft_id" let-area_id="area_id">
            <td>
              <button mat-icon-button [matMenuTriggerFor]="editMenu">
                <mat-icon>edit</mat-icon>
              </button>
              <mat-menu #editMenu>
                <button mat-menu-item [mDetailRouterLink]="{ id: id, type: 'software', area_id: area_id }">
                  详情
                </button>
                <button mat-menu-item (click)="softwareTableRef.refresh(upgradeSoftware(id))">
                  更新
                </button>
              </mat-menu>
            </td>
          </ng-template>
        </ng-container>
      </m-api-data-table>
    </m-card>
  </div>
  <div class="col-12 col-xl-3 ">
    <div class="g-sticky">
      <m-history [type]="'computer'"></m-history>
    </div>
  </div>
</div>